<template>

    <div id="productAdvertising">
        <Tablefilter :filter="filterModel" @search="search" @del="delTable()" @add="addTable()"></Tablefilter>

        <commonTable :getTableList="getTableList()"
                     :refresh.sync="refresh"
                     :filter="filter"
                     :selectRow.sync="selectRow"
                     :columns="columns">
        </commonTable>
        <commentEdit :refresh.sync="refresh" :editDialog.sync="editDialog" :commentForm.sync="commentForm"></commentEdit>
    </div>
</template>

<script>

    import Tablefilter from '../components/table/commonTableFilter'
    import commonTable from '../components/table/commonTable'
    import operate from '../components/table/operate'
    import commentEdit from '../comment/commentEdit'
    import {mapState} from 'vuex'

    export default {
        name: "productAdvertising",
        components: {
            Tablefilter,
            commentEdit,
            commonTable
        },
        data() {

            return {
                selectRow: [],
                filter: {},
                commentForm: {
                    id:'',
                    adId:'',
                    comment:'',
                    img:'',
                    score:5,
                    commentUser:'',
                },
                refresh: false,
                editDialog: false,
                columns: [
                    {label: this.$t('common.operate'), prop: 'operate', render: this.render('operate'), width: 180, tooltip: false},
                    {type: 'selection', width: 55},
                    {label: this.$t('common.id'), prop: 'adId', width: 60},
                    {label: this.$t('common.adName'), prop: 'adName'},
                    {label: this.$t('common.productId'), prop: 'productId'},
                    {label: this.$t('common.productName'), prop: 'productName'},
                    {label: this.$t('common.price'), prop: 'price'},
                    {label: this.$t('common.adImg'), prop: 'adImg',render: this.render('adImg')},
                    // {label: this.$t('common.domain'), prop: 'domain'},
                    {label: this.$t('common.adUrl'), prop: 'adUrl',render: this.render('adUrl')},
                    {label: this.$t('common.products'), prop: 'products'},
                    {label: this.$t('common.hits'), prop: 'hits'},
                    {label: this.$t('common.orderNumber'), prop: 'orderNumber'},
                    {label: this.$t('common.maxByNum'), prop: 'maxByNum',width: 45, tooltip: false},
                    {label: this.$t('common.country'), prop: 'countryId',render: this.render('countryId')},
                    {label: this.$t('common.optimizer'), prop: 'optimizer',render: this.render('optimizer')},
                    {label: this.$t('common.createTime'), prop: 'createTime'},
                ],
                filterModel: {
                    adId: {
                        label: this.$t('common.adId'),
                        value: '',
                    },
                    productId: {
                        label: this.$t('common.productId'),
                        value: '',
                    },
                    adName: {
                        label: this.$t('common.adName'),
                        value: '',
                    },
                    productName: {
                        label: this.$t('common.productName'),
                        value: '',
                    },
                    country: {
                        label: this.$t('common.country'),
                        value: '',
                        options: []
                    },
                    productType: {
                        label: this.$t('common.productType'),
                        value: '',
                        options: []
                    },
                    creator: {
                        label: this.$t('common.optimizer'),
                        value: '',
                    },
                    time: {
                        label: this.$t('common.time'),
                        value: '',
                        time: true,
                    },
                },
            }
        },
        methods: {
            search(filter) {
                this.filter = filter
                this.refresh = true
            },
            delTable(Id) {
                let params = Id ? [Id] : this.selectRow.map(v => {
                    return v.adId
                })
                this.$delAdvertises(params).then(response => {
                    if (response.code === 'success') {
                        this.$message.success(this.$t('common.delSuccess'))
                        this.refresh = true
                        this.selectRow = []
                    } else {
                        this.$message.error(this.$t('common.delError'))
                    }
                })
            },
            addTable(Id,domain,copy) {
                let params = {
                    id: Id
                }
                Id && this.$store.commit('saveAdEditId',Id)
                this.$store.commit('saveAdCopy',copy)
                if(copy){
                    params.copy = true
                }
                if(domain){
                    params.domain = domain
                }
                this.$router.push({path: '/productAddAdvertising', query:params});
            },
            addComment(adId) {
                this.editDialog = true
                this.commentForm.adId = adId
            },
            getTableList() {
                return this.$advertisesList
            },
            render(prop) {
                let render = {},_this = this
                if (!prop) return;
                render.countryId = (h, params) => {
                    return h('div',_this.$t('option.'+_this.countryOptions.filter((v)=>{ return v.value == params.row.countryId})[0].label))
                }
                render.adImg = (h, params) => {
                    return h('div',{
                            style:{
                                height:'40px',
                                'text-align':'center'
                            }
                        },[
                        h('img',{
                            attrs:{
                                src:params.row.adImg
                            },
                            style:{
                                'max-height':'100%',
                                'max-width':'100%',
                            }
                        })
                    ]
                    )
                }
                render.optimizer = (h, params) => {
                    return h('div',[ h('input',{
                        class:{
                            'optimizer-input':true
                        },
                        style:{
                            display:'none'
                        },
                        domProps:{
                            value:params.row.optimizer,
                        },
                        on:{
                            blur:(e)=>{
                                e.target.style.display = 'none'
                                e.target.nextSibling.style.display = 'block'
                                e.target.nextSibling.innerText = e.target.value
                                this.changeOptimizer( e.target.value, e.target._value,params.row.adId,e.target)
                            }
                        }
                    }),
                    h('div',{
                        class:{
                            'optimizer-div':true
                        },
                        on: {
                            dblclick:function(e){
                                e.target.style.display = 'none'
                                e.target.previousSibling.style.display = 'block'
                                e.target.previousSibling.focus()
                            },
                        },
                    },
                        params.row.optimizer
                    )])
                }
                render.operate = (h, params) => {
                    let options = [{
                        style:'',
                        click:[this.addTable,params.row.adId,params.row.domain],
                        label:this.$t('common.edit'),
                        type: 'warning',
                    },{
                        style:'',
                        click:[this.addTable,params.row.adId,params.row.domain,true],
                        label:this.$t('common.copy'),
                        type: 'success',
                    },{
                        style:'',
                        click:[this.delTable,params.row.adId],
                        label:this.$t('common.del'),
                        type: 'danger',
                    },{
                        style:'',
                        click:[this.addComment,params.row.adId],
                        label:this.$t('common.addComment'),
                        type: 'danger',
                    }]
                    return h(operate,{
                        props:{
                            options:options
                        }
                    })
                }
                render.adUrl = (h, params) => {
                    return h('div', [
                         h('a', {
                            style: {
                                marginLeft: '5px'
                            },
                            attrs: {
                                href: 'http://'+params.row.domain+(params.row.url?params.row.url:'?id='+params.row.adId),
                                target: "_blank"
                            }},
                             'http://'+params.row.domain+(params.row.url?params.row.url:'?id='+params.row.adId)
                        ),
                    ])
                }
                return render[prop]
            },
            changeOptimizer(value,old,id,target){
                if(value == old){
                    return
                }
                let parmas = {
                    adId:id,
                    optimizer:value
                }
                this.$addAdvertises([parmas]).then(response => {
                    if (response.code && response.code === 'success') {
                        this.$message.success(this.$t('common.editSuccess'))
                    } else {
                        this.$message.error(response.msg)
                        target.value = old
                        target.nextSibling.innerText = old
                        target._value = old
                    }
                })
            }
        },
        mounted() {
            this.filterModel.productType.options = this.productTypeOptions
            this.filterModel.country.options = this.countryOptions
        },
        computed: {
            ...mapState(['productTypeOptions','countryOptions'])
        },
    }
</script>

<style >
    .optimizer-input{
        border: none;
        max-width: 100%;
    }
    .optimizer-div{
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    #productAdvertising  .el-table--mini th, #productAdvertising .el-table-column--selection>div{
        text-align: center;
    }
    #productAdvertising .el-table-column--selection>div{
        padding: 0 5px;
    }
    #productAdvertising .el-table th>.cell{
        padding-left: 0;
        padding-right: 0;
    }
    #productAdvertising .el-button--mini, .el-button--mini.is-round {
        padding: 7px 5px;
    }
</style>